<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
    <style type="text/css">
    	.mui-bar-nav{
    		background: #3366cc;
    	}
    	.mui-bar-nav h1{
    		color: white;
    	}
    	.like{
    		margin-top: 40px;
    		height: 500px;
    		background: white;
    	}
    	#likeul{
    		background: white;
    	}
    	.like h4{
    		text-align: center;
    		padding-top: 15px;
    		padding-bottom: -10px;
    	}
    	
    </style>
</head>
<body>
	<div class="mui-content">
	    <header class="mui-bar mui-bar-nav">
	        <h1 class="mui-title">我的收藏</h1>
	        <a href="#popover" class="mui-pull-right">
	    	<span class="mui-icon iconfont mui-icon mui-icon-plusempty" style="color: white;"></span>
	    	</a>	        	        
	    </header>
		    <style type="text/css">
				#popover{
					height:70px;
					width:140px;
				}
			</style>
			<div id="popover" class="mui-popover">
				<div class="mui-scroll-wrapper">
				    <div class="mui-scroll">
					    <ul class="mui-table-view" id="popov">
					    	<li class="mui-table-view-cell"><a href="#"><span class="iconfont icon-tianjia"></span><label>收藏管理</label></a></li>
					    </ul>
					</div>
				</div>
			</div>
			
			<!--我喜欢-->
			<div class="like">
			<h4>-喜欢-</h4>
			<ul class="mui-table-view mui-grid-view mui-grid-9" id="likeul">
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#" id="xiangqing">
			        <img src="images/tushu1.jpg" style="width: 150px;height: 150px;">
			        <div class="mui-media-body">月亮于六便士</div>
			    </a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#" id="xiangqing1">
			         <img src="images/tushu2.jpg" style="width: 150px;height: 150px;">
			        <div class="mui-media-body">小王子</div>
			    </a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#">
			        <img src="images/tushu3.jpg" style="width: 150px;height: 150px;">
			        <div class="mui-media-body">简 爱</div>
			    </a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#">
			        <img src="images/tushu4.jpg" style="width: 150px;height: 150px;">
			        <div class="mui-media-body">复 活</div>
			    </a>
			</li>
			<a href="#" class="mui-pull-right" style="margin-top: 5px;margin-right: 5px;"><p>更多 > </p></a>
			   </ul>
			
			</div>
			
			<!--技术收藏-->
			<div class="like">
			<h4>-技术-</h4>
			<ul class="mui-table-view mui-grid-view mui-grid-9" id="likeul">
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#">
			        <img src="images/tushu1.jpg" style="width: 150px;height: 150px;">
			        <div class="mui-media-body">月亮于六便士</div>
			    </a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#">
			         <img src="images/tushu2.jpg" style="width: 150px;height: 150px;">
			        <div class="mui-media-body">小王子</div>
			    </a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#">
			        <img src="images/tushu3.jpg" style="width: 150px;height: 150px;">
			        <div class="mui-media-body">简 爱</div>
			    </a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#">
			        <img src="images/tushu4.jpg" style="width: 150px;height: 150px;">
			        <div class="mui-media-body">复 活</div>
			    </a>
			</li>
			<a href="#" class="mui-pull-right" style="margin-top: 5px;margin-right: 5px;"><p>更多 > </p></a>
			   </ul>
			
			</div>
			
			<!--鸡汤收藏-->
			<div class="like">
			<h4>-鸡汤-</h4>
			<ul class="mui-table-view mui-grid-view mui-grid-9" id="likeul">
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#">
			        <img src="images/tushu1.jpg" style="width: 150px;height: 150px;">
			        <div class="mui-media-body">月亮于六便士</div>
			    </a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#">
			         <img src="images/tushu2.jpg" style="width: 150px;height: 150px;">
			        <div class="mui-media-body">小王子</div>
			    </a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#">
			        <img src="images/tushu3.jpg" style="width: 150px;height: 150px;">
			        <div class="mui-media-body">简 爱</div>
			    </a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#">
			        <img src="images/tushu4.jpg" style="width: 150px;height: 150px;">
			        <div class="mui-media-body">复 活</div>
			    </a>
			</li>
			<a href="#" class="mui-pull-right" style="margin-top: 5px;margin-right: 5px;"><p>更多 > </p></a>
			   </ul>
			
			</div>
	    
	    
	    
	
	</div>
</body>
<script>
	document.getElementById('xiangqing').addEventListener('tap', function() {
		  //打开我的详情页面
		  mui.openWindow({
		    url: 'xiangqing.html', 
		    id:'xiangqing'
		  });
		});
		document.getElementById('xiangqing1').addEventListener('tap', function() {
		  //打开我的详情页面
		  mui.openWindow({
		    url: 'xiangqing.html', 
		    id:'xiangqing'
		  });
		});
</script>
</html>